<template>
	<view class="edit-supplier-container">
		<view class="form-section">
			<u-form :model="formData" ref="uForm" label-position="left" label-width="160rpx">
				<u-form-item label="供应商名称" prop="supplierName" required>
					<u-input v-model="formData.supplierName" placeholder="请输入供应商名称" />
				</u-form-item>
				
				<u-form-item label="联系人" prop="contactName">
					<u-input v-model="formData.contactName" placeholder="请输入联系人" />
				</u-form-item>
				
				<u-form-item label="手机" prop="mobileNumber">
					<u-input v-model="formData.mobileNumber" placeholder="请输入手机号码" type="number" />
				</u-form-item>
				
				<u-form-item label="电话" prop="phoneNumber">
					<u-input v-model="formData.phoneNumber" placeholder="请输入座机电话" type="number" />
				</u-form-item>
				
				<u-form-item label="送货地址" prop="businessAddress">
					<u-input v-model="formData.businessAddress" placeholder="请输入送货地址" />
				</u-form-item>
				
				<u-form-item label="应付款" prop="amountPayable">
					<u-input v-model="formData.amountPayable" placeholder="0.00" type="number" disabled />
				</u-form-item>
				
				<u-form-item label="备注" prop="remark">
					<u-input v-model="formData.remark" placeholder="请输入备注信息" type="textarea" />
				</u-form-item>
			</u-form>
		</view>
		
		<!-- 底部保存按钮 -->
		<view class="bottom-btn">
			<button class="save-btn" @click="updateSupplier">保存修改</button>
		</view>
	</view>
</template>

<script>
	import api from '@/utils/api.js'
	export default {
		data() {
			return {
				supplierId: null, // 供应商ID
				formData: {
					supplierName: '',
					contactName: '',
					mobileNumber: '',
					phoneNumber: '',
					businessAddress: '',
					amountPayable: '0.00',
					remark: ''
				},
				// 表单验证规则
				rules: {
					supplierName: [
						{
							required: true,
							message: '请输入供应商名称',
							trigger: ['blur', 'change']
						}
					],
					mobileNumber: [
						{
							pattern: /^1[3-9]\d{9}$/,
							message: '请输入正确的手机号码',
							trigger: ['blur', 'change']
						}
					]
				}
			}
		},
		onLoad(options) {
			console.log('options:', options);
			
			// 获取供应商ID
			if (options.id) {
				console.log('供应商ID:', options.id);
				
				this.supplierId = options.id;
				// 加载供应商详情
				this.loadSupplierDetail();
			} else {
				uni.showToast({
					title: '供应商ID不存在',
					icon: 'none'
				});
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			}
		},
		onReady() {
			// 设置表单验证规则
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			// 加载供应商详情
			loadSupplierDetail() {
				uni.showLoading({
					title: '加载中...'
				});
				
				api.getSupplier(this.supplierId).then(res => { // 假设存在 getSupplier API
					uni.hideLoading();
					console.log('供应商详情返回:', res);
					
					if (res) {
						const data = res; // 修改：从 res.data 获取数据
						this.formData = {
							supplierId: this.supplierId,
							supplierName: data.supplierName || '',
							contactName: data.contactName || '',
							mobileNumber: data.mobileNumber || '',
							phoneNumber: data.phoneNumber || '',
							businessAddress: data.businessAddress || '',
							amountPayable: data.amountPayable !== undefined ? data.amountPayable.toString() : '0.00',
							remark: data.remark || ''
						};
					} else {
						uni.showToast({
							title: '获取供应商信息失败',
							icon: 'none'
						});
					}
				}).catch(err => {
					console.error('获取供应商详情失败:', err);
					uni.hideLoading();
					uni.showToast({
						title: '获取供应商信息失败',
						icon: 'none'
					});
				});
			},
			
			// 更新供应商信息
			updateSupplier() {
				console.log('更新供应商信息');
				if (!this.$refs.uForm) {
					console.error('表单实例 uForm 未找到');
					uni.showToast({ title: '表单错误', icon: 'none' });
					return;
				}

				this.$refs.uForm.validate().then(valid => {
					if (valid) {
						console.log('表单验证通过');
						uni.showLoading({
							title: '保存中...'
						});

						// 确保 formData 中包含 id
						const postData = {
							...this.formData,
						};

						api.updateSupplier(postData).then(res => {
							uni.hideLoading();
							console.log('更新供应商返回:', res);

							if (res) {
								uni.showToast({
									title: '修改成功',
									icon: 'success',
									duration: 1500
								});

								setTimeout(() => {
									uni.navigateBack({ delta: 1 });
								}, 1500);
							} else {
								uni.showToast({
									title: res.msg || '修改失败',
									icon: 'none'
								});
							}
						}).catch(err => {
							console.error('修改供应商失败:', err);
							uni.hideLoading();
							uni.showToast({
								title: '修改失败，请重试',
								icon: 'none'
							});
						});
					} else {
						console.log('表单验证失败');
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.edit-supplier-container {
	min-height: 100vh;
	background-color: #f5f7fa;
	padding-bottom: 120rpx;
	padding-top: 20rpx; /* 添加顶部内边距 */
}

.form-section {
	background-color: #fff;
	padding: 0 20rpx;
	margin: 20rpx;
	border-radius: 16rpx;
	
	/deep/ .u-form-item {
		min-height: 100rpx;
		padding: 10rpx 0; // 增加上下内边距
		border-bottom: 1px solid #f0f0f0; // 添加分隔线

		&:last-child {
			border-bottom: none; // 最后一个移除分隔线
		}
		
		.u-form-item__body__left__content {
			color: #333;
			font-size: 28rpx;
		}
		
		.u-form-item__body__right__content {
			.u-input {
				font-size: 28rpx;
			}
		}
	}
}

.bottom-btn {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 20rpx;
	background-color: #fff; // 背景改为白色
	box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05); // 添加阴影
	
	.save-btn {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #39C9BB; // 主题色
		color: #fff;
		font-size: 30rpx;
		border-radius: 40rpx; // 圆角按钮
		border: none;
	}
}
</style> 